<!-- 端到端关联配置 -->
<template>
	<div class="end-to-end-config-container">
		<!-- 搜索表单 -->
		<el-form :model="searchFormData" :inline="true" :label-width="100">
			<el-form-item label="系统名称" prop="systemId">
				<el-select v-model="searchFormData.systemId" placeholder="请选择系统名称" style="width: 200px" clearable @change="systemChange">
					<el-option v-for="(dict, index) in state.systemNameOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="业务名称" prop="businessCode">
				<el-select v-model="searchFormData.businessCode" placeholder="请选择业务名称" style="width: 200px" clearable @change="businessChange">
					<el-option v-for="(dict, index) in state.businessOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="步骤名称" prop="stepCode">
				<el-select v-model="searchFormData.stepCode" placeholder="请选择步骤名称" style="width: 200px" clearable>
					<el-option v-for="(dict, index) in state.stepNameOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handlerQuery">查 询</el-button>
			</el-form-item>
		</el-form>

		<br />

		<!-- 绘图区 -->
		<div v-loading="loadingGraphFlag" class="config-container">
			<div id="graphContainer"></div>
			<div id="miniMapId"></div>
		</div>

		<!-- 添加端到端关联关系dialog -->
		<el-dialog title="添加端到端关联关系" v-model="dialog.add.open" width="600px" append-to-body>
			<el-form :model="dialog.add.form" :rules="dialog.add.rule" label-width="140px">
				<el-form-item label="本端" prop="segmentId">
					<el-select v-model="dialog.add.form.segmentId" placeholder="请选择网端" style="width: 100%">
						<el-option v-for="(option, index) in options.segmentOptions" :key="index" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="业务服务资源编码" prop="resourceCode">
					<el-input v-model="dialog.add.form.resourceCode" disabled>
						<template #append>
							<el-button @click="selectResource" icon="Tickets"></el-button>
						</template>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addNode" :loading="dialog.add.btnLoading">确 定</el-button>
				<el-button @click="dialog.add.open = false">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog title="新增节点" v-model="open.nodeAttrDialog" width="600px" append-to-body>
			<el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="140px">
				<el-row :gutter="10">
					<el-col :span="16">
						<el-form-item label="服务资源编码" prop="resourceCode">
							<el-input v-model="addForm.resourceCode" disabled>
								<template #append>
									<el-button @click="selectResource" icon="Tickets"></el-button>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="当前端:" prop="segmentId">
							<el-select v-model="addForm.segmentId" placeholder="请选择" style="width: 200px">
								<el-option v-for="(dict, index) in options.segmentOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancelHandle">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 删除节点对话框 -->
		<el-dialog
			title="删除节点"
			v-model="open.deleteDialog"
			width="500px"
			append-to-body
			center
			@close="deleteCancelHandle"
			:close-on-click-modal="false"
		>
			<el-form ref="deleteFormRef" :model="deleteForm" label-width="200px" label-position="top">
				<el-row>
					<el-col :span="24">
						<el-form-item label="请确认选择以下删除方式:" prop="isRecursiveDelete">
							<el-radio-group v-model="deleteForm.isRecursiveDelete">
								<el-radio :label="0">只删除本端(可能会出现端与端中断的情况)</el-radio>
								<el-radio :label="1" style="margin-top: 20px">递归删除(删除后续的所有端关系)</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="deleteSubmitForm">确 定</el-button>
				<el-button @click="deleteCancelHandle">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 选择业务服务资源弹出层 -->
		<select-server-resource ref="selectServerResourceRef"></select-server-resource>
	</div>
</template>

<script setup name="EndToEndConfig" lang="ts">
import G6 from '@antv/g6';
import registerShape from './shape';
import registerBehavior from './behavior';
import SelectServerResource from './selectServerResource.vue';

import e2eCfgAddDisabledPng from '@/assets/images/admin/topology/add-disabled.png';
import e2eCfgAddPng from '@/assets/images/admin/topology/add.png';
import e2eCfgEditDisabledPng from '@/assets/images/admin/topology/edit-disabled.png';
import e2eCfgEditPng from '@/assets/images/admin/topology/edit.png';
import e2eCfgDeleteDisabledPng from '@/assets/images/admin/topology/delete-disabled.png';
import e2eCfgDeletePng from '@/assets/images/admin/topology/delete.png';
import e2eCfgMinimapDisabledPng from '@/assets/images/admin/topology/minimap-disabled.png';
import e2eCfgMinimapPng from '@/assets/images/admin/topology/minimap.png';
import e2eCfgMouseResizeDisabledPng from '@/assets/images/admin/topology/mouse-resize-disabled.png';
import e2eCfgMouseResizePng from '@/assets/images/admin/topology/mouse-resize.png';
import { querySegmentOptions, queryAllBusinessBySystemCode, segment } from '@/api/search/searchOptions';
import { business, step, system } from '@/api/admin/businessMonitor/businessStepConfig';
import { queryStepInitInfo } from '@/api/admin/businessMonitor/netendSamplingDetail';
import { getStepId, updateLocation, add, remove, selectBusinessState } from '@/api/admin/businessMonitor/endToEndConfig';
import { htmlEncodeByRegExp } from '@/utils/common';
import { getCurrentInstance, nextTick, onActivated, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const { proxy }: any = getCurrentInstance();
const route = useRoute();
const router = useRouter();
// 搜索表单对象
const searchFormData = reactive<any>({
	systemId: '',
	...route.query,
});
// g6 graph对象
let graph = null as any;
// 图形数据
let graphData = {
	nodes: [],
	edges: [],
};
// 图形模式
let graphMode = 'default';
// dialog配置
let dialog = reactive<any>({
	add: {
		open: false,
		form: {},
		rule: {
			segmentId: [{ required: true, message: '网端必选', trigger: 'change' }],
			resourceCoding: [
				{
					required: true,
					message: '服务资源编码不能为空',
					trigger: 'blur',
				},
			],
		},
		btnLoading: false,
	},
});
// 选项
let options = reactive<any>({
	segmentOptions: [],
});
// 是否显示弹出层
let open = reactive<any>({
	nodeAttrDialog: false,
	deleteDialog: false,
	blackDialog: false,
	synchItroadDialog: false,
});
let deleteForm = reactive<any>({
	isRecursiveDelete: 0,
});
// 表单参数
const addForm = ref({
	segmentId: '',
}) as any;
const rules = {
	afterBusinessCode: [{ required: true, message: '资源编码不能为空', trigger: 'blur' }],
};
// 是否显示缩略图
let isShowMinimap = false;
// 缩略图对象
let minimap = null as any;
// 当前选中的节点
let selectedNode = null as any;
// 图形加载中
const loadingGraphFlag = ref(false);
const state = reactive<any>({
	systemNameOptions: [],
	businessOptions: [],
});

/**
 * 查询系统名称下拉框
 */
function queryAllAppSystemOptionsFn() {
	system().then((res: any) => {
		state.systemNameOptions = res.data;
		// searchFormData.systemId = '';
		// if (route.query.systemId) {
		// 	searchFormData.systemId = route.query.systemId;
		// } else {
		// 	searchFormData.systemId = state.systemNameOptions[0].value;
		// }
		searchBusinssFn(searchFormData.systemId);
	});
}
/**
 * 查询业务名称下拉框
 */
function searchBusinssFn(systemId: string | number): void {
	business(systemId).then((res: ApiResponse | any) => {
		state.businessOptions = res.data;
		// if (route.query.businessCode) {
		// 	searchFormData.businessCode = route.query.businessCode;
		// } else {
		// 	if (state.businessOptions && state.businessOptions.length > 0) {
		// 		searchFormData.businessCode = state.businessOptions[0].value;
		// 	}
		// }
		searchStepFn(searchFormData.businessCode);
	});
}
/**
 * 查询步骤名称下拉框
 */
function searchStepFn(businessCode: string | number): void {
	step(businessCode).then((res: ApiResponse | any) => {
		state.stepNameOptions = res.data;
		// if (route.query.stepCode) {
		// 	searchFormData.stepCode = route.query.stepCode;
		// } else {
		// 	if (state.stepNameOptions && state.stepNameOptions.length > 0) {
		// 		searchFormData.stepCode = state.stepNameOptions[0].value;
		// 	}
		// }
	});
}

function systemChange(val: number | string) {
	searchBusinssFn(val);
	getStepInitInfo();
	searchFormData.businessCode = '';
	searchFormData.stepCode = '';
}
function businessChange(val: number | string) {
	searchStepFn(val);
	searchFormData.stepCode = '';
}
function defaultSelectFormData() {
	if (route.query.systemId) {
		for (let key in route.query) {
			if (key === 'systemId') {
				searchFormData['systemId'] = route.query[key];
			} else {
				searchFormData[key] = route.query[key];
			}
		}
	}
	if (route.query.businessCode) {
		for (let key in route.query) {
			if (key === 'businessCode') {
				searchFormData['businessCode'] = route.query[key];
			} else {
				searchFormData[key] = route.query[key];
			}
		}
	}
	if (route.query.stepCode) {
		for (let key in route.query) {
			if (key === 'stepCode') {
				searchFormData['stepCode'] = route.query[key];
			} else {
				searchFormData[key] = route.query[key];
			}
		}
	}
}
onMounted(() => {
	// 加载配置
	registerShape(G6);
	registerBehavior(G6);
	// 初始化graph
	initGraph();
	getStepInitInfo();
	queryAllAppSystemOptionsFn();
	handlerQuery();
	defaultSelectFormData();
});

// 获取新增修改时当前端下拉框数据
function getStepInitInfo() {
	options.segmentOptions = [];
	segment({ systemId: searchFormData.systemId }).then((res: ApiResponse | any) => {
		options.segmentOptions = res.data;
	});
}

//根据系统id查询端信息
function getOptionsList(obj: any) {
	querySegmentOptions(obj).then((res: any) => {
		const data = res.result;
		if (data !== null) {
			for (let i = 0; i < data.length; i++) {
				let temp: { value: number | string | null; label: string } = { value: null, label: '' };
				temp.value = parseInt(data[i].id);
				temp.label = data[i].label;
				options.segmentOptions.push(temp);
			}
		}
	});
}

// 初始化graph
function initGraph() {
	// 1、获取宽高
	const width = document.getElementById('graphContainer').scrollWidth - 1;
	const height = 570;

	// 2、初始化graph对象
	const graphObj = new G6.Graph({
		// 图的  DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
		container: 'graphContainer',
		// 指定画布宽度，单位为 'px'
		width,
		// 指定画布高度，单位为 'px'
		height,
		// 是否开启画布自适应。开启后图自动适配画布大小
		fitView: false,
		// v3.5.1 后支持。开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView
		fitCenter: false,
		// 最小缩放比例
		minZoom: 0.2,
		// 最大缩放比例
		maxZoom: 2,
		// 渲染方式，该配置项除 V3.3.x 外其他版本均支持 'canvas' / 'svg'
		// renderer: 'canvas',
		// 是否启用 stack，即是否开启 redo & undo 功能，该配置项 V3.6 及以上版本支持
		// enabledStack: false,
		// 插件
		plugins: [],
		// 设置画布的模式
		modes: {
			// 默认模式
			default: [
				// 拖拽画布
				'drag-canvas',
				// 拖拽节点
				'drag-node',
				// 节点高亮(自定义)
				'activate-node',
				// 鼠标移入显示提示框
				{
					type: 'tooltip',
					formatText(model: any) {
						return `<span style='color: #262626'>${htmlEncodeByRegExp(model.identifyStr)}</span>`;
					},
				},
			],
			// 缩放模式
			resize: [
				// 拖拽画布
				'drag-canvas',
				// 缩放画布
				'zoom-canvas',
				// 拖拽节点
				'drag-node',
				// 节点高亮(自定义)
				'activate-node',
			],
		},
		// 布局配置项，使用 type 字段指定使用的布局方式，type 可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考
		layout: {
			type: 'dagre',
			rankdir: 'LR',
			nodesep: 30,
			ranksep: 50,
		},
		/* layout: {
        type: 'allItRoadLayout'
      }, */
		// 默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖
		defaultNode: {
			type: 'endToEndNode',
		},
		// 默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖
		defaultEdge: {
			type: 'myCubicHorizontal',
		},
		// 各个状态下节点的样式，例如 hover、selected，3.1 版本新增
		nodeStateStyles: {},
		// 各个状态下边的样式，例如 hover、selected，3.1 版本新增
		edgeStateStyles: {},
	});
	graph = graphObj;

	// 3、设置工具栏
	const toolbar = new G6.ToolBar({
		getContent: () => {
			const outDiv = document.createElement('div');
			outDiv.style.width = '400px';
			outDiv.style.height = '65px';
			outDiv.innerHTML = `<ul>
          <li code="add">
            <div>
              <div class="add-back"></div>
              <div>新增</div>
            </div>
          </li>
          <li code="edit">
            <div>
              <div class="edit-back"></div>
              <div>编辑</div>
            </div>
          </li>
            <li code="delete">
            <div>
              <div class="delete-back"></div>
              <div>删除</div>
            </div>
          </li>
          <li code="miniMap">
            <div>
              <div class="minimap-back"></div>
              <div>鹰眼</div>
            </div>
          </li>
          <li code="mouseResize">
            <div>
              <div class="mouse-resize-back"></div>
              <div>缩放</div>
            </div>
          </li>
        </ul>`;
			return outDiv;
		},
		handleClick: (code, graph) => {
			if (code === 'edit') {
				editNode();
			} else if (code === 'delete') {
				deleteNode();
			} else if (code === 'add') {
				addNode();
			} else if (code === 'miniMap') {
				toggleShowMinimap();
			} else if (code === 'mouseResize') {
				toggleMouseResize();
			}
		},
	});
	graph.addPlugin(toolbar);

	// 4、监听事件
	// 监听被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
	graph.on('node:dragend', (ev: any) => {
		selectedNode = ev.item;
		if (ev.originalEvent.dataTransfer) {
			// 拖拽新增节点
			addNode(ev);
		} else {
			// 拖拽更新节点位置
			updateNodePos(ev);
		}
	});
	// 节点点击事件
	graph.on('node:click', (ev: any) => {
		selectedNode = ev.item;
		const states = ev.item.getStates();
		let addBack = null;
		let editBack = null;
		let deleteBack = null;
		console.log(states, 'statesstates');

		if (states.length <= 0) {
			selectedNode = null;
			addBack = <HTMLElement>document.getElementsByClassName('add-back')[0];
			addBack.style.backgroundImage = 'url(' + e2eCfgAddDisabledPng + ')';
			editBack = <HTMLElement>document.getElementsByClassName('edit-back')[0];
			editBack.style.backgroundImage = 'url(' + e2eCfgEditDisabledPng + ')';
			deleteBack = <HTMLElement>document.getElementsByClassName('delete-back')[0];
			deleteBack.style.backgroundImage = 'url(' + e2eCfgDeleteDisabledPng + ')';
			return;
		}
		selectedNode = ev.item.getModel();
		addBack = <HTMLElement>document.getElementsByClassName('add-back')[0];
		addBack.style.backgroundImage = 'url(' + e2eCfgAddPng + ')';
		editBack = <HTMLElement>document.getElementsByClassName('delete-back')[0];
		editBack.style.backgroundImage = 'url(' + e2eCfgDeletePng + ')';
		deleteBack = <HTMLElement>document.getElementsByClassName('edit-back')[0];
		deleteBack.style.backgroundImage = 'url(' + e2eCfgEditPng + ')';
	});
	// 移入边时高亮显示
	graph.on('edge:mouseenter', (ev: any) => {
		const edge = ev.item;
		// graph.setItemState(edge, 'active', true);
	});
	// 移出边时去除高亮
	graph.on('edge:mouseleave', (ev: any) => {
		const edge = ev.item;
		//如果边是选中状态，那么移动鼠标，那么保留选中状态，给删除用。
		if (edge.hasState('selected')) {
			return;
		}
		graph.setItemState(edge, 'active', false);
	});
}

// 搜索
function handlerQuery() {
	// getStepInitInfo();
	// 重置画布
	resetCanvas();
	// 加载数据
	loadingGraphFlag.value = true;
	const distinctNodeArr = [] as any,
		distinctEdgeArr = [] as any;
	getStepId(searchFormData).then((res: any) => {
		loadingGraphFlag.value = false;
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		const d: anyObj = {
			nodes: [],
			edges: [],
		};
		//当前系统没有节点，清空返回
		if (!res.data || res.data.length <= 0) {
			graph.data(d);
			graph.render();
			return;
		}

		// 处理数据：节点和边
		formatGraphData(res.data);
		function formatGraphData(arr: any, idKey = 'id') {
			arr.forEach((node: any) => {
				node.id = node.id + '';
				node.name = node.segmentName || '- -';
				let index = d.nodes.findIndex((n: any) => n.id === node.id);
				// 没有的节点才加进去
				if (index === -1) {
					d.nodes.push(node);
				}
				if (node.childNodes instanceof Array) {
					node.childNodes.forEach((subNode: any) => {
						d.edges.push({
							source: node[idKey] + '',
							target: subNode[idKey] + '',
						});
					});
					formatGraphData(node.childNodes, idKey);
				}
			});
		}
		// const edge = graph.createEdge({
		// 	source: d.nodes[0],
		// 	target: d.nodes[1],
		// });
		// graph.addEdge(edge);

		graph.data(d);
		graph.render();

		// 更新坐标位置,设置x、y坐标
		updateCoordinate();
	});
}
/**
 * 更新坐标位置,设置x、y坐标
 */
function updateCoordinate() {
	graph.on('afterlayout', () => {
		const nodes = graph.getNodes();
		nodes.forEach((node: any) => {
			const model = node.getModel();
			const { id, locationX, locationY } = model;
			console.log(`Node ${id} - x: ${locationX}, y: ${locationY}`);
			// 修改节点的位置
			graph.updateItem(node, { x: locationX, y: locationY });
		});
	});
}
// 重置画布
function resetCanvas() {
	isShowMinimap = false;
	let minimapBack = <HTMLElement>document.getElementsByClassName('minimap-back')[0];
	minimapBack.style.backgroundImage = 'url(' + e2eCfgMinimapDisabledPng + ')';
	if (minimap) {
		graph.removePlugin(minimap);
		minimap = null;
	}
	graphMode = 'default';
	let mouseResizeBack = <HTMLElement>document.getElementsByClassName('mouse-resize-back')[0];
	mouseResizeBack.style.backgroundImage = 'url(' + e2eCfgMouseResizeDisabledPng + ')';
	graph.setMode(graphMode);
	selectedNode = null;
	let editBack = <HTMLElement>document.getElementsByClassName('edit-back')[0];
	editBack.style.backgroundImage = 'url(' + e2eCfgEditDisabledPng + ')';
	let addBack = <HTMLElement>document.getElementsByClassName('add-back')[0];
	addBack.style.backgroundImage = 'url(' + e2eCfgAddDisabledPng + ')';
	let deleteBack = <HTMLElement>document.getElementsByClassName('delete-back')[0];
	deleteBack.style.backgroundImage = 'url(' + e2eCfgDeleteDisabledPng + ')';
}
// 选择业务服务资源
function selectResource() {
	proxy.$refs.selectServerResourceRef.openDialog(() => {
		const selected = proxy.$refs.selectServerResourceRef.getSelectServerResource();
		addForm.value.resourceCode = selected.resourceCode;
	});
}

// 添加新的节点
function addNode() {
	reset();
	if (selectedNode === null || selectedNode === '') {
		proxy.$modal.msgWarning('请选择一个前端节点');
		return;
	}
	const nodeModel = selectedNode;
	const type = nodeModel.type;
	if (type === 'netendSamplingDetailEdge') {
		proxy.$modal.msgWarning('当前选中的是边，请重新选择一个前端节点');
		return;
	}
	addForm.value.segmentId = '';
	let res = options.segmentOptions.filter((item: any) => item.label === nodeModel.name);
	if (res.length === 0) {
		proxy.$modal.msgWarning('当前网端为空，请重新选择系统');
		return;
	}
	addForm.value.segmentId = res && res[0].value;
	open.nodeAttrDialog = true;
}
/**
 * 获取segmentId
 */
function getSegmentId(): number | string {
	const nodeModel = selectedNode;
	let res = options.segmentOptions.filter((item: any) => item.label === nodeModel.name);
	return (res && res[0].value) || '';
}
/** 保存新增节点--提交按钮 **/
function submitForm() {
	const nodeModel = selectedNode;
	proxy.$refs['addFormRef'].validate((valid: any) => {
		if (valid) {
			// addForm.value.segmentId = getSegmentId();
			const newNode = {
				locationX: 50,
				locationY: 50,
				resourceCode: addForm.value.resourceCode,
				segmentId: addForm.value.segmentId,
				parentNodeId: nodeModel.id,
				// ...route.query,
				...searchFormData,
			};
			add(newNode).then((res: ApiResponse | any) => {
				if (res.code === 0) {
					handlerQuery();
					proxy.$modal.msgSuccess('新增成功');
					selectedNode = null;
					open.nodeAttrDialog = false;
				} else {
					proxy.$modal.msgError(res.msg);
				}
			});
		}
	});
}
// 表单重置
function reset() {
	addForm.value = {
		id: undefined,
		afterBusinessCode: undefined,
		segmentId: '',
	};
	if (proxy.$refs['addFormRef']) {
		proxy.$refs['addFormRef'].resetFields();
	}
}

function cancelHandle() {
	open.nodeAttrDialog = false;
	reset();
}

// 更新节点位置
function updateNodePos(ev: any) {
	const model = ev.item.getModel();
	addForm.value.segmentId = model.segmentId;

	updateLocation({
		...searchFormData,
		segmentId: model.segmentId,
		resourceCode: model.resourceCode,
		afterLocationId: model.locationId,
		locationX: model.x,
		locationY: model.y,
		nodeId: model.nodeId,
	}).then((res: ApiResponse | any) => {
		ev.item.update({ x: model.x, y: model.y });
	});
}
// 编辑节点
function editNode() {
	if (selectedNode) {
		router.push({
			path: '/management/indicatorManage/proprietaryIndicatorManage/detail',
			query: {
				resourceCode: selectedNode.resourceCode,
				identifyStr: selectedNode.identifyStr,
			},
		});
	}
}

function deleteNode() {
	if (selectedNode === null || selectedNode === '') {
		proxy.$modal.msgWarning('请选择要删除的节点。');
		return;
	}
	open.deleteDialog = true;
}
//删除节点处理
function deleteSubmitForm() {
	const nodeModel = selectedNode;
	let text = '节点：' + nodeModel.name;
	proxy.$modal
		.confirm('是否需要删除已经选中的' + text, '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			console.log(searchFormData, nodeModel, 'searchFormData');
			let isRecur = false;
			if (deleteForm.isRecursiveDelete) {
				isRecur = true;
			}
			remove({
				// id: selectedNode.newId,
				isRecursiveDelete: isRecur,
				// ...route.query,
				nodeId: nodeModel.nodeId,
				...searchFormData,
			}).then((res: ApiResponse | any) => {
				if (res.code === 0) {
					proxy.$modal.msgSuccess('删除成功');
					selectedNode = null;
					open.deleteDialog = false;
					handlerQuery();
				} else {
					proxy.$modal.msgError(res.msg);
				}
			});
		})
		.catch(function () {});
}
function deleteCancelHandle() {
	open.deleteDialog = false;
}

// 切换显示/隐藏缩略图
function toggleShowMinimap() {
	let minimapBack = null;
	if (isShowMinimap) {
		minimapBack = <HTMLElement>document.getElementsByClassName('minimap-back')[0];
		minimapBack.style.backgroundImage = 'url(' + e2eCfgMinimapDisabledPng + ')';
		graph.removePlugin(minimap);
		minimap = null;
	} else {
		minimapBack = <HTMLElement>document.getElementsByClassName('minimap-back')[0];
		minimapBack.style.backgroundImage = 'url(' + e2eCfgMinimapPng + ')';
		// 小地图插件
		minimap = new G6.Minimap({
			container: document.getElementById('miniMapId'),
			size: [150, 100],
		});
		graph.addPlugin(minimap);
	}
	isShowMinimap = !isShowMinimap;
}
// 切换鼠标缩放
function toggleMouseResize() {
	let mouseResizeBack = null;
	if (graphMode === 'default') {
		mouseResizeBack = <HTMLElement>document.getElementsByClassName('mouse-resize-back')[0];
		mouseResizeBack.style.backgroundImage = 'url(' + e2eCfgMouseResizePng + ')';
		graphMode = 'resize';
	} else {
		mouseResizeBack = <HTMLElement>document.getElementsByClassName('mouse-resize-back')[0];
		mouseResizeBack.style.backgroundImage = 'url(' + e2eCfgMouseResizeDisabledPng + ')';
		graphMode = 'default';
	}
	graph.setMode(graphMode);
}
</script>

<style rel="stylesheet/scss" lang="scss">
.end-to-end-config-container {
	.g6-component-toolbar {
		left: 0;
		top: 0;
		right: 0;
		margin: 0 auto;
		background-color: #2f5a86;
		color: #ffffff;

		ul {
			margin-block-start: 0;
			margin-block-end: 0;

			li {
				margin-right: 32px;
			}
		}

		.add-back {
			height: 40px;
			width: 40px;
			background-image: url('../../../../assets/images/admin/topology/add-disabled.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}

		.edit-back {
			height: 40px;
			width: 40px;
			background-image: url('../../../../assets/images/admin/topology/edit-disabled.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}

		.delete-back {
			height: 40px;
			width: 40px;
			background-image: url('../../../../assets/images/admin/topology/delete-disabled.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}

		.minimap-back {
			height: 40px;
			width: 40px;
			background-image: url('../../../../assets/images/admin/topology/minimap-disabled.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}

		.mouse-resize-back {
			height: 40px;
			width: 40px;
			background-image: url('../../../../assets/images/admin/topology/mouse-resize-disabled.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}
	}
}

.config-container {
	position: relative;
	height: 570px;

	#graphContainer {
		position: relative;
		border: 2px solid #dcdfe6;
		border-radius: 6px;
	}

	#miniMapId {
		position: absolute;
		width: 150px;
		height: 100px;
		right: 0;
		bottom: 0;
	}

	.g6-node-tooltip {
		background-color: #ffffff;
		border-radius: 6px;
		padding: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	}
}
</style>
